<template>
	<view>
		<view class="positioningbox">
			<view class="searcherbox">
				<view class="input">
					<view class="imgbox">
						<image src="../../static/ss.png"></image>
						<view style="display: flex;align-items: center;" @click="showAddress()" :style="{
							color:area_id?'#FF8A9B':''
						}">
							位置
							<uni-icons type="bottom" size="14" :color="{
								color:area_id?'#FF8A9B':''
							}"></uni-icons>
						</view>
					</view>
					<input v-model="keyword" maxlength="35" placeholder="搜索名称" />
					<view class="but" @click="handlelist()">
						搜索
					</view>
				</view>
				<modal :show="addressShow">
					<Vaddress :last-level="3" @select="setAddress"></Vaddress>
				</modal>
			</view>
		</view>
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="tonewsdetail(item)">
			<view class="rightbox">
				<image mode="aspectFill" :src="item.img.split('|')[0]"></image>
			</view>
			<view class="leftbox">
				<view class="namebox">
					{{item.name}}
				</view>
				<View class="numbox">
					<view>{{item.content}}</view>
				</View>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	import modal from "../../pages/goodscourses/components/modal.vue"
	import Vaddress from "../../pages/goodscourses/components/address.vue"
	export default {
		components: {
			kong,
			Vaddress,
			modal
		},
		data() {
			return {
				list: [],
				is_data: true,
				page: 1,
				imgbox: [],
				keyword: '',
				hotlist: [],
				catelist: [],
				navindex: null,
				cate_id: '',
				addressShow:false,
				area_id:'',
				loading:false,
				isEnd:false
			}
		},
		onLoad() {
			this.getlist()
			this.getimg()
			this.getcate()
		},
		onReachBottom() {
			this.getlist()
		},
		methods: {
			setAddress(e){
				this.area_id = e.id
				this.hideAddress()
				this.handlelist()
			},
			showAddress(){
				if(this.addressShow){
					this.hideAddress()
					return
				}
				this.addressShow = true
			},
			hideAddress(){
				this.addressShow = false
			},
			async getlist() {
				if(this.loading || this.isEnd)return
				try{
					uni.showLoading({
						title: '加载中'
					})
					this.loading = true
					let res = await this.$http({
						url: '/api/Activity/community',
						data: {
							page: this.page,
							limit:20,
							keyword: this.keyword,
							area_id:this.area_id
						}
					})
					if (res.data.length) {
						this.list.push(...res.data)
						this.page++
					}
					
					this.isEnd = res.data.length<20
					
				}finally{
					this.loading = false
					uni.hideLoading()
				}
				
				
			},
			handlelist() {
				this.isEnd = false
				this.list = []
				this.page = 1
				this.getlist()
			},
			changecate(item, index) {
				this.navindex = index
				this.cate_id = item.id
				this.list = []
				this.page = 1
				this.getlist()
			},
			getcate() {
				this.$http({
					url: '/api/Wechat/news_cate'
				}).then(res => {
					this.catelist = res.data
				})
			},
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " // + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			tonewsdetail(item) {
				uni.navigateTo({
					url: '/pagemy/shequ-detail/shequ-detail?data=' + JSON.stringify(item)
				})
			},
			//获取轮播图
			getimg() {
				this.$http({
					url: '/api/Activity/banner_list',
					data: {
						type: 6, //1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6新闻中心
					}
				}).then(res => {
					this.imgbox = res.data
				})
			},
			tourl(item) {
				console.log(item.url)
				// console.log(item.url)
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.positioningbox {
		// position: fixed;
		// top: 0;
		// z-index: 9999;
		width: 750rpx;
		background-color: #FFF;

		.uni-margin-wrap {
			width: 750rpx;
			height: 300rpx;

			.swiper {
				height: 300rpx;

				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;

					image {
						height: 300rpx;
						width: 100%;
					}
				}
			}
		}

		.searcherbox {
			width: 690rpx;
			padding: 0 30rpx;
			background-color: #FFF;

			.input {
				width: 690rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				opacity: 1;
				border: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 35rpx;

				.imgbox {
					display: flex;
					text-align: center;
					padding:0 20rpx;
					align-items: center;
					image {
						width: 33rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}

				>input {
					// width: 500rpx;
					flex:1;
					line-height: 70rpx;
					font-size: 28rpx;
				}

				.but {
					width: 112rpx;
					height: 70rpx;
					background: #FF8A9B;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #F7F7F7;
					text-align: center;
					line-height: 70rpx
				}
			}
		}
	}

	.hotbox {
		width: 690rpx;
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;

		.hotitem {
			min-height: 418rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			width: 336rpx;

			image {
				width: 336rpx;
				height: 226rpx;
			}

			.info {
				// display: flex;
				// flex-wrap: wrap;
				align-items: center;
				width: 300rpx;
				margin: 0 auto;

				.tipbox {
					width: 70rpx;
					padding: 5rpx 10rpx;
					// height: 34rpx;
					background: linear-gradient(180deg, #FF6178 0%, #FF8158 100%);
					border-radius: 18rpx 0rpx 18rpx 0rpx;
					text-align: center;
					line-height: 34rpx;
					color: #FFF;
					font-size: 26rpx;
					margin-right: 10rpx;
				}

				.titlebox {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
			}

			.look {
				width: 300rpx;
				margin: 20rpx auto 0 auto;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
			}
		}
	}

	.navtit {
		width: 750rpx;
		height: 84rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;


		.scroll-view_H {
			white-space: nowrap;
			width: 750rpx;

			.scroll-view-item_H {
				display: inline-block;
				width: fit-content;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 36rpx;
				padding: 0 15rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				border-bottom: solid 2rpx #FFF
			}

		}

		.openbox {
			width: 72rpx;
			height: 84rpx;
			background: #FFFFFF;
			text-align: center;
			line-height: 84rpx;

			image {
				width: 27rpx;
				height: 15rpx;
			}
		}
	}

	.listbox {
		width: 690rpx;
		// height: 196rpx;
		background: #FFFFFF;
		padding: 30rpx;
		// border-radius: 10rpx 10rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		justify-content: space-between;

		.leftbox {
			width: 468rpx;

			.namebox {
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;

				// position: relative;
				image {
					position: absolute;
					width: 22rpx;
					height: 34rpx;
					left: 35rpx;
				}
			}

			.numbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				margin-top: 10rpx;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.rightbox {
			text-align: right;


			image {
				width: 202rpx;
				height: 202rpx;
			}
		}
	}
</style>